<template>
  <div class="ranking-music-item-wrap">
    <p>{{songIndex}}</p>
    <p>{{songInfo.name}}</p>
    <p>{{songInfo.ar[0].name}}</p>
    <p>{{currentSongDuration}}</p>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed } from "vue";
import { timeFilter,formatZero } from "../../hooks/use-time-filter";

export default defineComponent({
  setup(props) {
    const currentSongDuration = computed(() => {
      //获取当前歌曲时长
      return timeFilter(
        props.songInfo.dt
      );
    });

    const songIndex = computed(() => {
        return formatZero(props.songIndex+1,2)
    })

    return {
        currentSongDuration,
        songIndex
    };
  },
  props: {
    songInfo: {
      type: Object,
    },
    songIndex:{
        type: Number
    }
  },
});
</script>
 
<style lang = "scss" scoped>
</style>